<template>
  <div class="settings">
    <div class="page-header">
      <h2>系统设置</h2>
    </div>
    
    <el-card>
      <template #header>
        <span>基本设置</span>
      </template>
      
      <el-form :model="settingsForm" label-width="120px">
        <el-form-item label="系统名称">
          <el-input v-model="settingsForm.systemName" placeholder="请输入系统名称" />
        </el-form-item>
        
        <el-form-item label="系统版本">
          <el-input v-model="settingsForm.version" placeholder="请输入系统版本" disabled />
        </el-form-item>
        
        <el-form-item label="Logo地址">
          <el-input v-model="settingsForm.logoUrl" placeholder="请输入Logo地址" />
        </el-form-item>
        
        <el-form-item label="备案信息">
          <el-input v-model="settingsForm.icp" placeholder="请输入备案信息" />
        </el-form-item>
        
        <el-form-item label="版权信息">
          <el-input v-model="settingsForm.copyright" placeholder="请输入版权信息" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>安全设置</span>
      </template>
      
      <el-form label-width="120px">
        <el-form-item label="会话超时">
          <el-input-number
            v-model="securitySettings.sessionTimeout"
            :min="5"
            :max="120"
            controls-position="right"
          />
          <span style="margin-left: 10px; color: #666;">分钟</span>
        </el-form-item>
        
        <el-form-item label="密码策略">
          <el-checkbox v-model="securitySettings.requireComplexPassword">要求复杂密码</el-checkbox>
          <el-checkbox v-model="securitySettings.enableTwoFactor">启用双因素认证</el-checkbox>
        </el-form-item>
        
        <el-form-item label="登录失败限制">
          <el-input-number
            v-model="securitySettings.maxLoginAttempts"
            :min="1"
            :max="10"
            controls-position="right"
          />
          <span style="margin-left: 10px; color: #666;">次</span>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSaveSecurity">保存安全设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { settingsService } from '../services/settingsService'

const loading = ref(false)
const securityLoading = ref(false)

const settingsForm = reactive({
  systemName: '',
  version: '',
  logoUrl: '',
  icp: '',
  copyright: ''
})

const securitySettings = reactive({
  sessionTimeout: 30,
  requireComplexPassword: true,
  enableTwoFactor: false,
  maxLoginAttempts: 5
})

// 加载系统设置
const loadSystemSettings = async () => {
  try {
    loading.value = true
    const response = await settingsService.getSystemSettings()
    const data = response.data || {}
    
    Object.assign(settingsForm, {
      systemName: data.systemName || 'CMS管理系统',
      version: data.version || 'v1.0.0',
      logoUrl: data.logoUrl || '',
      icp: data.icp || '',
      copyright: data.copyright || '© 2024 CMS管理系统'
    })
  } catch (error) {
    console.error('加载系统设置失败:', error)
    ElMessage.error('加载系统设置失败')
  } finally {
    loading.value = false
  }
}

// 加载安全设置
const loadSecuritySettings = async () => {
  try {
    securityLoading.value = true
    const response = await settingsService.getSecuritySettings()
    const data = response.data || {}
    
    Object.assign(securitySettings, {
      sessionTimeout: data.sessionTimeout || 30,
      requireComplexPassword: data.requireComplexPassword || true,
      enableTwoFactor: data.enableTwoFactor || false,
      maxLoginAttempts: data.maxLoginAttempts || 5
    })
  } catch (error) {
    console.error('加载安全设置失败:', error)
    ElMessage.error('加载安全设置失败')
  } finally {
    securityLoading.value = false
  }
}

const handleSave = async () => {
  try {
    loading.value = true
    await settingsService.updateSystemSettings(settingsForm)
    ElMessage.success('系统设置保存成功')
  } catch (error) {
    console.error('保存系统设置失败:', error)
    ElMessage.error('保存系统设置失败')
  } finally {
    loading.value = false
  }
}

const handleReset = () => {
  ElMessage.info('设置已重置')
  loadSystemSettings()
}

const handleSaveSecurity = async () => {
  try {
    securityLoading.value = true
    await settingsService.updateSecuritySettings(securitySettings)
    ElMessage.success('安全设置保存成功')
  } catch (error) {
    console.error('保存安全设置失败:', error)
    ElMessage.error('保存安全设置失败')
  } finally {
    securityLoading.value = false
  }
}

onMounted(() => {
  loadSystemSettings()
  loadSecuritySettings()
})
</script>

<style scoped>
.settings {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}
</style>